<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui树形表格</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/demo.css">
</head>
<body class="layui-hide">
<div class="right-desc">
    <div class="layui-text desc-item">
        treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，
        支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能，
        <a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
    </div>
    <div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
        <img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
        <div style="padding: 5px 10px;">
            EasyWeb管理系统模板
            <a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
        </div>
    </div>
</div>
<div class="page-wrapper">
    <blockquote class="layui-elem-quote" style="margin: 15px 0;">Layui树形表格3.x演示</blockquote>
    <div class="layui-btn-container">
        <a href="index.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe65c;</i>返回
        </a>
        <button class="layui-btn layui-btn-sm layui-btn-primary">支持格式校验</button>
        <a class="layui-btn layui-btn-sm layui-btn-primary" href="editAdv.html" style="position: relative;">
            <i class="layui-icon">&#xe642;</i>复杂编辑&nbsp;&nbsp;
            <span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
        </a>
    </div>
    <table id="demoTreeTb"></table>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: '../'
    }).use(['layer', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        treeTable.render({
            elem: '#demoTreeTb',
            url: 'json/data.json',
            toolbar: true,
            tree: {
                iconIndex: 2,
                isPidData: true
            },
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'name<i class=\"layui-icon\">&#xe642;</i>', edit: 'text'},
                {field: 'sex', title: 'sex<i class="layui-icon">&#xe642;</i>', edit: 'text'},
                {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
            ]],
            style: 'margin-top:0;'
        });

        treeTable.on('edit(demoTreeTb)', function (obj) {
            console.log(obj);
            if (true) {
                layer.tips('格式不正确', $(this), {tips: [1, '#FF5722']});
                return false;
            }
        });

    });
</script>
</body>
</html>